<script setup>
import {reactive, ref} from 'vue'
import {useRouter} from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
const router = useRouter()

import {UserApi} from '@/api/user'
// 表单数据
const form = ref({
  username: '',
  password: '',
  phone: '',
  email: '',
  userType: 'PUBLIC',
  realName: '',
  idCard: '',
  avatar: ''
})

const toRow = (form) => {
  return {
    username: form.username,
    password: form.password,
    phone: form.phone,
    email: form.email,
    userType: form.userType,
    realName: form.realName,
    idCard: form.idCard,
    avatar: form.avatar
  }
}
// 提交注册表单
const handleRegister = async () => {
  try {
    const res  = await  UserApi.register(toRow(form.value))
    console.log('注册成功', res.data)
    ElMessage.success('注册成功')
    resetForm()
  } catch (error) {
    console.error('注册失败', error)
    alert(`注册失败，请稍后再试${error.response?.data?.message || error.message}`)
  }

}
// 重置事件
const resetForm = () => {
  form.username = ''
  form.password = ''
  form.phone = ''
  form.email = ''
  form.userType = 'PUBLIC'
  form.realName = ''
  form.idCard = ''
  form.avatar = ''
}
// 验证错误信息
const errors = ref({})
</script>

<template>
  <div class="register-container">
    <el-card class="register-card" shadow="hover">
      <h2>用户注册</h2>
      <p>请填写以下信息完成注册</p>

      <el-form :model="form" label-width="auto">
        <!-- 用户名 -->
        <el-form-item label="用户名" :error="errors.username">
          <el-input v-model="form.username" placeholder="请输入用户名"/>
        </el-form-item>

        <!-- 密码 -->
        <el-form-item label="密码" :error="errors.password">
          <el-input v-model="form.password" type="password" show-password placeholder="请输入密码"/>
        </el-form-item>

<!--         确认密码
        <el-form-item label="确认密码" :error="errors.confirmPassword">
          <el-input v-model="form.confirmPassword" type="password" show-password placeholder="请再次输入密码"/>
        </el-form-item>-->

        <!-- 真实姓名 -->
        <el-form-item label="真实姓名">
          <el-input v-model="form.realName" placeholder="请输入真实姓名" />
        </el-form-item>

        <!-- 邮箱 -->
        <el-form-item label="邮箱" :error="errors.email">
          <el-input v-model="form.email" placeholder="请输入邮箱"/>
        </el-form-item>

        <!-- 手机号 -->
        <el-form-item label="手机号" :error="errors.phone">
          <el-input v-model="form.phone" placeholder="请输入手机号"/>
        </el-form-item>

        <!-- 身份证号 -->
        <el-form-item label="身份证号">
          <el-input v-model="form.idCard" placeholder="请输入身份证号码" />
        </el-form-item>

        <!-- 头像上传 -->
        <el-form-item label="头像">
          <el-input v-model="form.avatar" type="file" ></el-input>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button @click="handleRegister"  type="primary" style="width: 100%">注册</el-button>
        </el-form-item>
      </el-form>

      <div class="login-link">
        已有账号？
        <a href="/login">立即登录</a>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #a8edea, #fed6e3);
  padding: 20px;
}

.register-card {
  width: 100%;
  max-width: 450px;
  text-align: left;
}

.register-card h2 {
  margin-bottom: 10px;
  font-size: 24px;
  color: #333;
}

.register-card p {
  margin-bottom: 20px;
  color: #777;
  font-size: 14px;
}

.login-link {
  margin-top: 15px;
  font-size: 14px;
  text-align: center;
}

.login-link a {
  color: #409eff;
  text-decoration: underline;
  margin-left: 5px;
}
</style>
